<script>
import BookSearch from "../../components/book/BookSearch.vue";
import ReviewApi from "../../api/review";
import { mapStores } from "pinia";
import { useUserStore } from "../../stores/user";

export default {
  components: {
    BookSearch
  },
  inject: ["reload"],
  data() {
    return {
      myReviewList: [],
      total: 0,
      pageSize: 7,
      curPage: 0,
      limit: -1,
      offset: -1,
      editIndex: -1,
      editData: {},
      deleteIndex: -1
    };
  },
  methods: {
    async getReviewList(limit = -1, offset = -1) {
      try {
        let orderBy = "created_time";
        let sort = "DESC";
        const api = new ReviewApi();
        let res = await api.findAllByUserId(
          this.userStore.userData.userId,
          limit,
          offset,
          orderBy,
          sort
        );
        this.myReviewList = res.data;
        console.log(this.myReviewList);
      } catch (err) {
        console.error(err);
        this.$myMessageBox("应用服务器访问错误！");
      }
    },
    async getCount() {
      try {
        const api = new ReviewApi();
        let res = await api.getCountByUserId(this.userStore.userData.userId);
        this.total = res.data.total;
        console.log(this.total);
      } catch (err) {
        console.error(err);
        this.$myMessageBox("应用服务器访问错误！");
      }
    },
    goto(page) {
      this.curPage = page;
      this.offset = (page - 1) * this.pageSize;
      this.getReviewList(this.limit, this.offset);
    },
    setEditor(review, index) {
      this.editIndex = index;
      this.editData = JSON.stringify(review);
    },
    isEdit(index) {
      return this.editIndex === index;
    },
    cancalSave(review) {
      this.editIndex = -1;
      let originEditData = JSON.parse(this.editData);
      review.title = originEditData.title;
      review.content = originEditData.content;
    },
    async doSave(review) {
      try {
        const api = new ReviewApi();
        let res = await api.edit(review);
        if (res.code === 200) {
          this.editIndex = -1;
        }
      } catch (err) {
        console.error(err);
        this.$myMessageBox("应用服务器访问错误！");
      }
    },
    setDelete(index) {
      this.deleteIndex = index;
    },
    isDelete(index) {
      return this.deleteIndex === index;
    },
    cancalDelete() {
      this.deleteIndex = -1;
    },
    async doDelete(review) {
      try {
        const api = new ReviewApi();
        let res = await api.delete(review.id);
        if (res.code === 204) {
          this.deleteIndex = -1;
          this.myReviewList = this.myReviewList.filter((item) => item.id !== review.id);
        }
      } catch (err) {
        console.error(err);
        this.$myMessageBox("应用服务器访问错误！");
      }
    }
  },
  computed: {
    ...mapStores(useUserStore),
    updatedTime() {
      return (time) => {
        return new Date(time).toLocaleString();
      };
    }
  },
  async mounted() {
    this.curPage = 1;
    this.limit = this.pageSize;
    this.offset = 0;
    await this.getCount();
    await this.getReviewList(this.limit, this.offset);
  }
};
</script>

<template>
  <div class="my-review-list w80">
    <ul>
      <li>
        <span class="index">序号</span>
        <span class="book-title">书籍名称</span>
        <span class="title">评论标题</span>
        <span class="content">评论内容</span>
        <span class="time">发表时间</span>
        <span class="action">&nbsp;</span>
      </li>
      <li v-for="(review, index) in myReviewList" :key="review.id">
        <span class="index">{{ index + 1 }}</span>
        <span class="book-title">{{ review.bookTitle }}</span>
        <span class="title">
          <template v-if="isEdit(index)">
            <input type="text" v-model="review.title" />
          </template>
          <template v-else>{{ review.title }}</template>
        </span>
        <span class="content">
          <template v-if="isEdit(index)">
            <textarea rows="5" v-model="review.content"></textarea>
          </template>
          <template v-else>{{ review.content }}</template>
        </span>
        <span class="time">{{ updatedTime(review.updatedTime) }}</span>
        <span class="action">
          <template v-if="isEdit(index)">
            <button @click="doSave(review)">保存</button>
            <button @click="cancalSave(review)">取消</button>
          </template>
          <template v-if="isDelete(index)">
            <button @click="doDelete(review)">确认</button>
            <button @click="cancalDelete()">取消</button>
          </template>
          <template v-else>
            <button @click="setEditor(review, index)">编辑</button>
            <button @click="setDelete(index)">删除</button>
          </template>
        </span>
      </li>
    </ul>
    <my-pagination
      :total="total"
      :page-size="pageSize"
      :cur-page="curPage"
      :show-info="true"
      @goto="goto"
    />
  </div>
</template>

<style scoped>
.my-review-list {
  margin-bottom: 16px;
}

ul {
  margin-bottom: 8px;
}

li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3px;
}

li:first-of-type {
  background-color: rgb(72, 72, 252);
}

li.data-liat:nth-of-type(2n + 1) {
  background-color: #fff8f8;
}

li.data-list:nth-of-type(2n) {
  background-color: #f3f3ff;
}

li.data-list:hover {
  background-color: #9de094;
}

span {
  display: inline-block;
  padding: 8px;
}

.index {
  flex: 0 0 40px;
  text-align: center;
}

.book-title {
  flex: 1 0 auto;
}

.title {
  flex: 2 1 auto;
}

.content {
  flex: 2 1 auto;
}

.time {
  flex: 0 0 160px;
  text-align: center;
}

.action {
  flex: 0 0 120px;
  text-align: center;
}
</style>
